<template>
	<view class="mallDetails">

		<view class="navbar" :style="{'opacity':navbarStatus?1:0}">
			<view class="navBarGap"></view>
			<view class="flex align-item_center main border-box">
				<view class="back" @click="back">
					<image class="block" src="https://mall-admin.xinjiafu.net/mini-static/images/nav/1.png" />
				</view>
				<view class="tabs">
					<up-tabs :list="tabsList" :current="tabCurrent" :scrollable="false" :itemStyle="itemStyle"
						:activeStyle="activeStyle" :inactiveStyle="inactiveStyle" lineWidth="30" lineHeight="2" lineColor="#A72530"
						@click="jumpNav"></up-tabs>
				</view>
			</view>
		</view>

		<image class="mallDetails-head flex align-item_center justify-content_center" :src="productDetail?.picUrl"
			mode="aspectFill">
			<!-- <image class="block"  /> -->
		</image>

		<view class="mallDetails-points mallDetails-card border-box">
			<view class="head flex align-item_center justify-content_space-between">
				<view>
					{{productDetail?.price?fen2yuan(productDetail?.price,0) : 0}}<text>积分</text>
				</view>
				<view>{{productDetail?.marketPrice?fen2yuan(productDetail?.marketPrice,0) : 0}}元</view>
			</view>
			<view class="name mt20">{{productDetail?.name}}</view>
			<view class="count mt20 flex align-item_center justify-content_space-between">
				<view>
					{{productDetail?.salesCount || 0}} 件已售
				</view>
				<view class="flex align-item_center" @click="changeCollect">
					<image v-if="collectExists" class="block"
						src="https://mall-admin.xinjiafu.net/mini-static/images/homemaking/8.png" />
					<image v-else class="block" src="https://mall-admin.xinjiafu.net/mini-static/images/homemaking/10.png" />
					{{productDetail?.collectNum || 0}}人喜欢
				</view>
			</view>
		</view>

		<view class="mallDetails-card border-box mallDetails-argument">
			<!-- <view class="item flex align-item_center">
				<view>已选</view>
				<view>5999积分</view>
			</view>
			<view class="item flex align-item_center">
				<view>参数</view>
				<view>品牌，型号</view>
			</view> -->
			<view class="item flex align-item_center">
				<view>运费</view>
				<view>全国享包邮</view>
			</view>
			<view class="item flex align-item_center">
				<view>服务</view>
				<view class="flex align-item_center">
					<view class="item-service flex align-item_center">
						<image class="block" src="https://mall-admin.xinjiafu.net/mini-static/images/points/8.png"
							mode="aspectFill" />
						<view>正品保障</view>
					</view>
					<view class="item-service flex align-item_center">
						<image class="block" src="https://mall-admin.xinjiafu.net/mini-static/images/points/8.png"
							mode="aspectFill" />
						<view>七天退款</view>
					</view>
				</view>
			</view>
			<!-- <view class="item flex align-item_center">
				<view>售后</view>
				<view>本商品由XXXX旗舰店销售并提供发票</view>
			</view> -->
		</view>

		<view id="evaluate" class="mallDetails-card border-box v-evaluate">
			<view class="head flex align-item_center justify-content_space-between" @click="evaluate">
				<view class="head-title">商品评价（{{commentTotal}}）</view>
				<view class="head-data flex align-item_center">
					<view>{{productDetail?.goodRate}}%好评</view>
					<image class="block" src="https://mall-admin.xinjiafu.net/mini-static/images/points/10.png" />
				</view>
			</view>
			<view class="user flex align-item_center" v-for="item in commentList" :key="item.id">
				<image class="block user-avatar" src="https://mall-admin.xinjiafu.net/mini-static/images/common/0.png" />
				<view class="user-info">
					<view class="flex align-item_center">
						<text>{{item.userNickname}}</text>
						<image v-for="item in item.scores" :key="item" class="block"
							src="https://mall-admin.xinjiafu.net/mini-static/images/points/9.png" />
					</view>
					<view>{{item.skuProperties.map(item=>item.valueName).join(',')}}</view>
				</view>
			</view>
			<view class="content">{{commentList[0]?.content || commentList.length>0?'用户默认好评':"暂无评论"}}</view>
		</view>

		<view id="description" class="mallDetails-card border-box mallDetails-content" v-if="productDetail">
			<up-parse :content="productDetail?.description"></up-parse>
		</view>
		<u-gap height="240rpx"></u-gap>
		<view class="mallDetails-foot flex justify-content_space-between align-item_center">
			<view class="left flex align-item_center">
				<!-- <view class="item">
					<image style="width: 40rpx;height: 36rpx;" src="https://mall-admin.xinjiafu.net/mini-static/images/points/11.png" />
					<view>店铺</view>
				</view> -->
				<view class="item relative">
					<button class="absolute v-client" open-type="contact"></button>
					<image style="width: 40rpx;height: 36rpx;"
						src="https://mall-admin.xinjiafu.net/mini-static/images/points/12.png" />
					<view>客服</view>
				</view>
				<view class="item" @click="shoppingCart">
					<image style="width: 40rpx;height: 36rpx;"
						src="https://mall-admin.xinjiafu.net/mini-static/images/points/13.png" />
					<view>购物车</view>
				</view>
			</view>
			<view class="right flex">
				<view @click="confirm(0)">加入购物车</view>
				<view @click="confirm(1)">立即兑换</view>
			</view>
		</view>

		<!-- <productTypeVue v-model="productType.show" :productSkus="productSkus" /> -->
		<!-- 规格与数量弹框 -->
		<s-select-sku v-if="productDetail" :goodsInfo="productDetail" :show="productType.show" @addCart="onAddCart"
			@buy="onBuy" @change="onSkuChange" @close="productType.show = false" />
	</view>
</template>

<script setup>
	import {
		itemStyle,
		activeStyle,
		inactiveStyle
	} from "@/common/index.js"
	import {
		reactive,
		ref
	} from "vue";
	import {
		onLoad,
		onShow,
		onPageScroll
	} from "@dcloudio/uni-app"
	import {
		navigateTo
	} from "@/utils/tool.js"
	import productTypeVue from "@/components/productType.vue";
	import SpuApi from "@/sheep/api/product/spu.js"
	import FavoriteApi from "@/sheep/api/product/favorite.js"
	import {
		fen2yuan,
		convertProductPropertyList
	} from '@/sheep/hooks/useGoods.js';
	import CommentApi from "@/sheep/api/product/comment.js"
	import sheep from '@/sheep';


	const state = reactive({
		selectedSku: {}, // 选中的 SKU
	});

	// 规格变更
	function onSkuChange(e) {
		state.selectedSku = e;
	}

	// 添加购物车
	function onAddCart(e) {
		if (!e.id) {
			sheep.$helper.toast('请选择商品规格');
			return;
		}
		productType.show = false
		sheep.$store('cart').add(e);
	}

	// 立即购买
	function onBuy(e) {
		if (!state.selectedSku.id) {
			sheep.$helper.toast('请选择商品规格');
			return;
		}
		productType.show = false
		const items = [{
			skuId: e.id,
			count: e.goods_num
		}]
		navigateTo(`/points/mall_pay/index?items=${JSON.stringify(items)}&id=${productId.value}`)
	}

	onPageScroll((val) => {
		if (val.scrollTop >= 20) navbarStatus.value = true;
		else navbarStatus.value = false;

		if (val.scrollTop >= 436 && val.scrollTop < 537) tabCurrent.value = 1;
		else if (val.scrollTop >= 537) tabCurrent.value = 2;
		else tabCurrent.value = 0;
	})


	const tabCurrent = ref(0);

	const jumpNav = (val) => {
		if (val.index === 0) {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
		} else if (val.index === 1) {
			uni.pageScrollTo({
				scrollTop: 436,
				duration: 300
			});
		} else if (val.index === 2) {
			uni.pageScrollTo({
				scrollTop: 537,
				duration: 300
			});
		}
	}

	const commentList = ref([]);
	const commentTotal = ref(0)
	const commentPage = () => {
		CommentApi.getCommentPage(productId.value, 1, 1, 1).then(res => {
			commentList.value = res.data.list;
			commentTotal.value = res.data.total;
		})
	}

	const changeCollect = () => {
		if (collectExists.value) {
			FavoriteApi.deleteFavorite(productId.value).then(() => {
				favoriteExists()
				spuDetails()
			})
		} else {
			FavoriteApi.createFavorite(productId.value).then(() => {
				favoriteExists()
				spuDetails()
			})
		}
	}

	const shoppingCart = () => {
		navigateTo("/points/mall_shoppingCart/index")
	}

	const productType = reactive({
		show: false
	})

	const navbarStatus = ref(false);

	const confirm = (type) => {
		productType.show = true;
	}

	const evaluate = () => {
		navigateTo("/points/evaluate/index?id=" + productId.value)
	}

	const back = () => uni.navigateBack()

	const tabsList = reactive([{
		name: "全部",
	}, {
		name: "评价",
	}, {
		name: "详情",
	}, ])

	const collectExists = ref(false);
	const favoriteExists = () => {
		FavoriteApi.isFavoriteExists(productId.value).then(res => {
			collectExists.value = res.data
		})
	}

	// const productSkus = ref([]);
	const productDetail = ref()
	const productId = ref();
	const spuDetails = () => {
		SpuApi.getSpuDetail(productId.value).then(res => {
			productDetail.value = res.data;
		})
	}

	onShow(() => {
		spuDetails()
	})
	onLoad((option) => {
		if (option.id) {
			productId.value = option.id
			favoriteExists()
			commentPage()
		}
	})
</script>

<style>
	page {
		background: #F8F3E7;
	}
</style>
<style scoped lang="scss">
	.navbar {
		width: 100vw;
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		background: #EBEBEB;
		transition: opacity .2s;

		.main {
			padding: 27rpx 22rpx;

			.tabs {
				width: 560rpx;
			}

			.back {
				width: 28rpx;

				image {
					width: 18rpx;
					height: 34rpx;
				}
			}
		}
	}

	.mallDetails-foot {
		height: 75rpx + calc(18rpx * 2);
		position: fixed;
		left: 0;
		bottom: 0;

		width: 750rpx;
		background: #F8F3E9;
		border-top: 2rpx solid rgba(0, 0, 0, 0.08);
		padding-bottom: constant(safe-area-inset-bottom); //兼容 IOS<11.2
		padding-bottom: env(safe-area-inset-bottom); //兼容 IOS>11.2

		.right {
			margin-right: 22rpx;

			view {
				text-align: center;
				width: 172rpx;
				height: 56rpx;
				line-height: 56rpx;
				border-radius: 100rpx;
				border: 2rpx solid #A72530;
			}

			view:last-child {
				background: #A72530;
				margin-left: 20rpx;
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				color: rgba(255, 255, 255, 1);
			}

			view:first-child {
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				color: rgba(167, 37, 48, 1);
			}
		}

		.left {
			.item:not(:first-child) {
				margin-left: 52rpx;
			}

			.item:first-child {
				margin-left: 38rpx;
			}

			.item {
				text-align: center;

				view {
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 34.76rpx;
					color: rgba(153, 153, 153, 1);
					margin-top: 2rpx;
				}
			}
		}
	}

	.mallDetails-content {
		padding: 20rpx;
	}

	.mallDetails-argument {
		padding: 40rpx 24rpx;

		.item:not(:first-child) {
			margin-top: 24rpx;
		}

		.item {

			view:last-child {
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 40.54rpx;
				color: rgba(64, 3, 3, 1);
				margin-left: 46rpx;
			}

			view:first-child {
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 40.54rpx;
				color: rgba(102, 102, 102, 1);
			}

			&-service {
				view {
					margin-left: 10rpx !important;
				}

				image {
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
	}

	.mallDetails-points {
		padding: 20rpx 24rpx 34rpx 20rpx;

		.count {
			view:last-child {

				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 40.54rpx;
				color: rgba(153, 153, 153, 1);

				image {
					font-size: 28rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 40.54rpx;
					color: rgba(153, 153, 153, 1);
					width: 32rpx;
					height: 28rpx;
					margin-right: 10rpx;
				}
			}

			view:first-child {
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 40.54rpx;
				color: rgba(102, 102, 102, 1);
			}
		}

		.name {
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 40.54rpx;
			color: rgba(64, 3, 3, 1);
		}

		.head {
			view:last-child {
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 34.76rpx;
				color: rgba(102, 102, 102, 1);
			}

			view:first-child {
				font-size: 40rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 57.92rpx;
				color: rgba(167, 37, 48, 1);

				text {
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 57.92rpx;
					color: rgba(64, 3, 3, 1);
				}
			}
		}
	}

	.mallDetails-card {
		margin: 20rpx auto 0;
		width: 710rpx;
		border-radius: 8rpx;
		background: #EDE2CD;
	}

	.mallDetails-head {
		width: 750rpx;
		height: 628rpx;
		background: #fff;

		image {
			width: 360rpx;
			height: 360rpx;
			margin-top: 72rpx;
		}
	}
</style>